<template>
  <div class='wrapper'>
    <swiper :options='swiperOption' ref='mySwiper'>
      <swiper-slide v-for='(page, index) in pages' :key='index'>
        <div class='icons'>
          <div class='icon' v-for='item in page' :key='item.id'>
            <div class='icon-img'>
              <img :src='item.imgUrl' class='icon-img-content'>
              <p class='icon-desc'>{{item.title}}</p>
            </div>
          </div>
        </div>
      </swiper-slide>
      <div class='swiper-page' slot='pagination'></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'HomeIcons',
  props: {
    iconList: Array
  },
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-page',
        autoplay: false
      }
    }
  },
  computed: {
    pages: function () {
      let pageList = []
      for (let i in this.iconList) {
        let page = Math.floor(i / 8)
        pageList[page] = pageList[page] || []
        pageList[page].push(this.iconList[i])
      }
      return pageList
    }
  }
}
</script>

<style lang='stylus' scoped>
@import '~styles/varibles.styl'
@import '~styles/mixins.styl'

.wrapper >>> .swiper-pagination-bullet-active
  background: rgba(0, 175, 190, 0.8)
  width: 0.1rem
  height: 0.1rem
.wrapper >>> .swiper-pagination-bullet
  width: 0.1rem
  height: 0.1rem
.icons
  width: 100%
  margin-top: 0.2rem
  height: 3rem
  display: flex
  flex-wrap: wrap
  .icon
    width: 25%
    .icon-img-content
      width: 1.1rem
      height: 1.1rem
    .icon-desc
      height: 0.44rem
      line-height: 0.44rem
      color: $darkTextColor
      ellipsis()
.swiper-page
  position: static

</style>
